<template>
  <div class="echs">
    <h2>{{ $t("stock.sh_echarts.56hzfd0ss7o0") }}</h2>
    <div ref="bar" class="bar_echaert"></div>
  </div>
</template>
<script>
import { changeNum } from "@/assets/js/filters";
export default {
  props: ["echartHeight", "echartWidth", "ShEcharts"],
  components: {},
  data() {
    return {
      option: null,
      myChart: null,
      title_one: [
        { name: this.$t("stock.sh_echarts.56hzfd0sssw0") },
        { name: this.$t("stock.sh_echarts.56hzfd0ssxc0") },
        { name: this.$t("stock.sh_echarts.56hzfd0st0k0") },
        { name: this.$t("stock.sh_echarts.56hzfdcst0k0") },
      ],
      title_two: [
        { name: this.$t("stock.sh_echarts.56hzfd0st3g0") },
        { name: this.$t("stock.sh_echarts.56hzfd0st700") },
        { name: this.$t("stock.sh_echarts.56hzfd0st9s0") },
      ],
    };
  },
  mounted() {
    // this.$nextTick(function() {
    //   this.barEchart(this.ShEcharts);
    // });
  },
  methods: {
    barEchart(list) {
      //console.log(list,'ShEcharts')
      var _this = this,
        timer = [],
        line = [],
        line1 = [],
        updata = [],
        downdata = [];
      _this.setOption();
      if (list.AGActive == 1) {
        //A股通 (北向)
        list.ShEchartsList.hk2cn.kline.forEach(function (res) {
          timer.push(res.date);
          line.push(res.shIndex);
          line1.push(res.szIndex);
          updata.push(res.hk2sh);
          downdata.push(res.hk2sz);
        });
      } else {
        //AGActive == 2 港股通 (南向)
        list.ShEchartsList.cn2hk.kline.forEach(function (res) {
          timer.push(res.date);
          line.push(res.hkIndex);
          updata.push(res.sh2hk);
          downdata.push(res.sz2hk);
        });
      }
      _this.option.xAxis[0].data = timer;
      _this.option.series[0].data = updata;
      _this.option.series[1].data = downdata;
      _this.option.series[2].data = line;
      if (_this.ShEcharts.AGActive == 1) _this.option.series[3].data = line1;
      _this.myChart = _this.$echarts.init(_this.$refs.bar);
      _this.myChart.setOption(_this.option, true);

      window.addEventListener("resize", function () {
        _this.myChart.resize();
      });
    },
    setOption() {
      var _this = this;
      var colors = ["#448EF6", "#71AFFF", "#A6C2E8"];
      let AC = [
        {
          name: _this.title_one[0].name,
          type: "bar",
          yAxisIndex: 0,
          data: [],
        },
        {
          name: _this.title_one[1].name,
          type: "bar",
          yAxisIndex: 0,
          data: [],
        },
        {
          name: _this.title_one[2].name,
          type: "line",
          yAxisIndex: 1,
          data: [],
        },
        {
          name: _this.title_one[3].name,
          type: "line",
          yAxisIndex: 1,
          data: [],
        },
      ];
      let SH = [
        {
          name: _this.title_two[0].name,
          type: "bar",
          yAxisIndex: 0,
          data: [],
        },
        {
          name: _this.title_two[1].name,
          type: "bar",
          yAxisIndex: 0,
          data: [],
        },
        {
          name: _this.title_two[2].name,
          type: "line",
          yAxisIndex: 1,
          data: [],
        },
      ];
      return (_this.option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          backgroundColor: "rgba(50,50,50,0.5)",
          confine: true,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow",
            shadowStyle: {
              color: "rgba(150,150,150,0)",
            }, // 默认为直线，可选为：'line' | 'shadow'
          },
          triggerOn: "mousemove",
        },
        grid: {
          x: "10%",
          y: "10%",
          top: "15%",
          width: "80%",
          height: "70%",
        },
        dataZoom: [
          {
            textStyle: { color: "#8392A5" },
            height: 12,
            bottom: 0,
            start: 70,
            end: 100,
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%",
            dataBackground: {
              areaStyle: { color: "#8392A5" },
              lineStyle: { opacity: 1, color: "#8392A5" },
            },
            handleStyle: {
              color: "#fff",
              shadowBlur: 6,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
          },
          {
            type: "inside",
          },
        ],
        animation: false,
        legend: {
          data:
            _this.ShEcharts.AGActive == 1 ? _this.title_one : _this.title_two,
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              color: "#fff",
              lineStyle: {
                color: "#222538",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#222538",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            // min: -800,
            // max: 800,
            // interval: 200,
            axisLabel: {
              //label文字设置
              color: "#fff",
              lineStyle: {
                color: "#222538",
              },
              formatter: function (value, index) {
                if (localStorage.getItem("lang") == "en") {
                  return `${Number(value / 10 ** 7).toFixed(2)}B`;
                } else {
                  return `${Number(value / 10 ** 8).toFixed(2)}亿`;
                }
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#222538",
              },
            },
          },
          {
            type: "value",
            name: "",
            // min: -800,
            // max: 800,
            // interval: 200,
            axisLabel: {
              //label文字设置
              color: "#fff",
              lineStyle: {
                color: "#222538",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#222538",
              },
            },
          },
        ],
        series: _this.ShEcharts.AGActive == 1 ? AC : SH,
      });
    },
    yearDate(time) {
      return (
        time.getFullYear() +
        "-" +
        (time.getMonth() + 1 >= 10
          ? time.getMonth() + 1
          : "0" + (time.getMonth() + 1)) +
        "-" +
        (time.getDate() >= 10 ? time.getDate() : "0" + time.getDate())
      );
    },
    timestampToTime(timestamp) {
      if (timestamp == "" || timestamp == 0) {
        return "--";
      }
      let timestamp1 = Number(timestamp) * 1000;
      const dateObj = new Date(+timestamp1); // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
      const year = dateObj.getFullYear(); // 获取年，
      const month = dateObj.getMonth() + 1; // 获取月，必须要加1，因为月份是从0开始计算的
      const date = dateObj.getDate(); // 获取日，记得区分getDay()方法是获取星期几的。
      const hours =
        dateObj.getHours() >= 10
          ? dateObj.getHours()
          : "0" + dateObj.getHours();
      const minutes =
        dateObj.getMinutes() >= 10
          ? dateObj.getMinutes()
          : "0" + dateObj.getMinutes(); // 获取分
      const seconds =
        dateObj.getSeconds() >= 10
          ? dateObj.getSeconds()
          : "0" + dateObj.getSeconds(); // 获取秒
      return month + "-" + date;
    },
  },
  watch: {
    ShEcharts: {
      handler(val, old) {
        var _this = this;
        if (val.AGActive != 0) {
          if (val.AGActive != old.AGActive) {
            if (val.ShEchartsList.length != 0) {
              console.log(val, "ShEcharts");
              _this.barEchart(val);
            }
          }
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang="less">
.echs {
  height: 100%;
  h2 {
    font-size: 12px;
    color: @fff;
    line-height: 30px;
  }
  .bar_echaert {
    width: 100%;
    height: calc(100% - 30px);
  }
}
</style>